<template>
    
    <el-form  :model="dataForm" status-icon :rules="formRule" ref="update" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机号">
            <el-input v-if="category=='edit'" type="text" :value="dataForm.phone" disabled></el-input>
            <el-input v-if="category=='add'" type="text" v-model="dataForm.phone"></el-input>
        </el-form-item>
       
        <el-form-item label="昵称" prop="nickname">
            <el-input type="text" v-model="dataForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-radio v-model="dataForm.gender" label="1">男</el-radio>
            <el-radio v-model="dataForm.gender" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="dataForm.roleId">
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item._id"></el-option>
          </el-select>
       </el-form-item>

        <el-form-item label="生日" prop="birthday">
            <el-date-picker v-model="dataForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="生活状态" >
            <el-radio v-model="dataForm.status" label="1">单身</el-radio>
            <el-radio v-model="dataForm.status" label="2">热恋</el-radio>
            <el-radio v-model="dataForm.status" label="3">已婚</el-radio>
            <el-radio v-model="dataForm.status" label="4">为人父母</el-radio>
        </el-form-item>

        <el-form-item label="从事行业" >
            <el-select v-model="dataForm.industry" placeholder="请选择">
                <el-option value="计算机" label="计算机"></el-option>
                <el-option value="操作员" label="操作员"></el-option>
                <el-option value="其他" label="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="个人图像" >

            <UploadImg @send="getImgName" :imgHref="curImg"></UploadImg>

        </el-form-item>
        <el-form-item label="个性签名" >
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="dataForm.sign">
                </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('update')">提交</el-button>
            <el-button @click="resetForm('update')">重置</el-button>
        </el-form-item>

    </el-form>   
       

 </template>
 
 <script>
 import axiosEl from '@/utils/axios';
 import UploadImg from '@/components/UploadImg.vue';
 export default {
    props:{
        userId:String,
        category:String
    },
     data(){
         return {
            roleList:[], // 角色列表
             curImg:'',
             dataForm:{},
             formRule:{
                 nickname:[
                     {required: true, message: '请输入昵称', trigger: 'blur'}
                 ],
                 gender:[
                     {required: true, message: '请选择性别', trigger: 'blur'}
                 ],
                 roleId:[
                     {required: true, message: '请选择角色', trigger: 'blur'}
                 ]
             }
         }
     },
     watch:{
        userId:{
            immediate:true,
            handler(newId){
                if(newId) {
                    // 编辑
                    this.getUserInfo();
                } else {
                    //添加
                    this.dataForm = {};
                }
                
            }
        }
     },
     components:{
         UploadImg
     },
     methods:{
             // 获取到所有角色
            async getAllRoles(){
                let resData = await axiosEl({
                method:'get',
                url:'/roles/findRoles'
                })
                if(resData.code==1){
                this.roleList = resData.data;
                }
            },
         // 用来获取子组件给的数据
         getImgName(name){
             this.dataForm.icon = name;   // 接口返回的图片名字， 需要提交到数据库去
         },
         // 获取用户详情
        async getUserInfo(){
           let resData = await  axiosEl.get('/users/detail',{
            params:{
                id:this.userId
            }
           });
           console.log(resData);
           const {nickname,gender,icon,industry,phone,sign,status,birthday,_id,roleId} = resData.data;
           this.dataForm = {nickname,gender,icon,industry,phone,sign,status,birthday,roleId};
           
           this.curImg = `${process.env.VUE_APP_IMG_SERVER}/upload/${icon[0]}`
           console.log(this.curImg,'图片地址1');
           
         },
         submitForm(form){
             this.$refs[form].validate(async (valid)=>{
                 if(!valid) return;
                 // form表单数据
                 console.log(this.dataForm);
                 
                 let interUrl = this.userId ? '/users/update/info' : '/users/add';

                 this.dataForm.id = this.userId;
                 // 开始提交接口
                 let res = await axiosEl.post(interUrl,this.dataForm);
                 if(res.code==1){
                     this.$message({
                         type:'success',
                         message:res.msg
                     })
                   this.$emit('sendOk',true)
                 } else {
                     this.$message({
                         type:'warning',
                         message:res.msg
                     })
                 }
 
 
             })
         },
         resetForm(form){
             // 表单重置
             this.$refs[form].resetFields();
         }
     },
    //  created，mounted 组件不销毁的情况下，只会执行一次
     mounted(){
       this.getAllRoles();
     }
 
 }
 </script>
 
 <style lang="scss" scoped>
 .msg-form {
     width: 500px;
     margin:50px;
 }
 // 使用了scoped样式隔离后， ::v-deep才会有效
 ::v-deep {
     
 .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 178px;
     height: 178px;
     line-height: 178px;
     text-align: center;
   }
   .avatar {
     width: 178px;
     height: 178px;
     display: block;
   }
 }
 
 </style>